import {useState, useEffect} from 'react'
import {useNavigate, useLocation} from 'react-router-dom'
import TabsList  from '../../../components/Tabs/index.jsx'
import { TruckOutline } from 'antd-mobile-icons'
import PopupList from '../../../components/PopupList/index.jsx'
import request from '../../../utils/request.jsx'
import './style.less'

const Category = () => {
   const [data, setData] = useState([])
   const location = useLocation()
   const [popupVisible, setPopupVisible] = useState(false)
   const [popupState, setPopupState] = useState('')
   const {pathname} = location
   const categoryId = pathname.split('/')[pathname.split('/').length -1 ]
   useEffect(()=> {
      getDate()
   }, [categoryId])
   const getDate = async () => {
      let {data} = await request.get(`/commodity?categoryId=${categoryId}`)
      setData(data)
   }
   const onTabsChange = async value => {
      let {searchName, types} = value
      let {data} = types&& await request.get(`/commodity?_sort=${types}&_${types}=${searchName}`)
      setData(data)
   }

   const onPopup = value => {
      setPopupVisible(!popupVisible)
      setPopupState(value)
   }

   const onClose = () => {
      setPopupVisible(false)
   }
     return (
        <div>
            <TabsList onTabsChange={onTabsChange}/>
            <div className="category-list">
               {data&& data.map(item => (
                  <div key={item.id}>
                     <p><img src={item.image}></img></p>
                     <p>{item.name}</p>
                     <p>
                        <span>
                           <b>￥{item.price}</b>
                           <s>{item.oldPrice}</s>
                           <TruckOutline onClick={()=> onPopup(item.id)}/>
                        </span>

                     </p>
                  </div>

               ))}
            </div>
            <PopupList popupVisible={popupVisible} popupId={popupState} onClose={onClose}/>
         </div>
     )
}

export default Category